<script setup lang="ts">
import {onMounted, ref} from "vue";
import $bus from '@/utils/emitter.ts'
import articleCategoryApi from '@/api/articleCategory.ts'
import LayoutStore from "@/store/modules/setting.ts";
const layoutStore = LayoutStore()
const categoryList = ref()
const activeId = ref()
const isLoading = ref(false)
onMounted(async ()=>{
  isLoading.value = true
  await articleCategoryApi.getAllArticleCategory().then((res:any) =>{
    categoryList.value = res.rows
  })
  isLoading.value = false
})

const clickCategoryHandle = (categoryId:number) => {
  activeId.value = categoryId
  const el = document.querySelector('.tag-active')
  if (el) {
    el.classList.remove('tag-active')
  }
  layoutStore.setIsCategoryOrTag(true)
  // 发送查询请求
  $bus.emit('getArticlePageHandle', {categoryId:categoryId})
}
</script>

<template>
  <div class="left-1-3">
    <div class="title">分类导航</div>
    <div class="content" v-if="!isLoading">
      <div class="item" v-for="(item,index) in categoryList"
           :key="index"
           :class="item.id == activeId ? 'category-active' : ''"
           @click="clickCategoryHandle(item.id)">
          <component :is="item.icon" class="icon" style="height: 22px;aspect-ratio: 1/1"></component>
        <div class="name">
          {{item.name}}
        </div>
        <div class="number">
          {{item.useNum}}
        </div>
      </div>
    </div>
    <div v-else style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center">
      <a-spin></a-spin>
    </div>
  </div>
</template>
<style scoped lang="scss">
.left-1-3{
  font-size: 16px;
}
.content{
  display: flex;
  flex-direction: column;
}
.item{
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  height: 45px;
  gap: 5px;
  padding: 10px;
  transition: all .3s;
  .icon{
    color: rgb(168, 174, 185);
  }
  .number{
    color: rgb(168, 174, 185);
  }
  &:hover{
    background-color: rgb(249, 250, 251);
  }
}
.category-active{
  transition: all .3s;
  background-color: rgb(226, 227, 228);
  &:hover{
    background-color: rgb(226, 227, 228);
  }
}
</style>
